<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="../static/images/local/校标.jpg" />
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/mySignIn.css">
</head>
<body>
<div class="wrap">
        <img src="../static/images/local/shanghai1.jpg" class="imgStyle" >
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <h2 style="margin-top: 15px">新闻发布系统</h2>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>身份选择</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-user adminIcon"></i>
                    <select name="1ddq" id="identify" class="layui-input smallInput adminInput layui-input adminInput" lay-verify="required" lay-search>
                        <option value="用户" aria-checked="true">用户</option>
                        <option value="管理员" >管理员</option>
                    </select>
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>手机号码</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-cellphone adminIcon"></i>
                    <label for="phone"></label><input id="phone" class="layui-input smallInput adminInput" type="text" name="username" placeholder="5-11位数字组成" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>账号密码</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <label for="password"></label><input id="password" class="layui-input smallInput adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel ">
                    <label>验证码</label>
                </div>
                <div class="cardDiv">
                    <label for="loginCard"></label><input id="loginCard" class="layui-input smallInput cardInput " type="text" name="card" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput"  type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitLabel">
                    <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class=" layui-btn layui-btn-primary" value="登录"/>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="../static/layui/layui.js" type="text/javascript"></script>
<script>
    // const baseUrl='http://106.14.16.188'
    // const baseUrl='http://localhost:8080'
    localStorage.setItem("baseUrl","")
    localStorage.setItem("suffix","")
    localStorage.setItem("prefix","")
    const baseUrl=localStorage.getItem("baseUrl");
    const suffix=localStorage.getItem("suffix");
    const prefix=localStorage.getItem("prefix");
    layui.use(['layer'],function () {
        const layer = layui.layer;
    })
    $(function () {
        // 页面初始化生成验证码
        window.onload = createCode('#loginCode');
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
        // 注册事件
        $('#loginRegister').click(function () {
            register();
        });
    });
    // 生成验证码
    function createCode(codeID) {
        let code = "";
        // 验证码长度
        let codeLength = 4;
        // 验证码dom元素
        let checkCode = $(codeID);
        // 验证码随机数
        let random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z'];
        for (let i = 0;i < codeLength; i++){
            // 随机数索引
            let index = Math.floor(Math.random()*36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }
    // 校验验证码、用户名、密码
    function validateCode(inputID,codeID) {
        const inputCode = $(inputID).val().toUpperCase();
        const cardCode = $(codeID).val();
        const identify=document.getElementById("identify").value;
        const phone = document.getElementById("phone").value;
        const password = document.getElementById("password").value;
        if(identify!=="管理员"&&identify!=="用户")
        {
            layer.alert("请选择身份");
            return false;
        }
        if ($.trim(phone) === '' || $.trim(phone).length<=0){
            layer.alert("手机号不能为空");
            return false;
        }
        if ($.trim(password) === '' || $.trim(password).length<=0){
            layer.alert("密码不能为空");
            return false;
        }
        if (inputCode.length<=0){
            layer.alert("验证码不能为空");
            return false;
        }
        if (inputCode !== cardCode){
            layer.alert("请输入正确验证码");
            return false;
        }
        return true;
    }
    function checkSignIn() {
        const phone = document.getElementById("phone1").value;
        const username =document.getElementById("username").value;
        const password1 = document.getElementById("password1").value;
        const password2 = document.getElementById("password2").value;
        const email=document.getElementById("email").value;
        if ($.trim(phone) === '' || $.trim(phone).length<=0){
            console.log(phone);
            layer.alert("手机号不能为空");
            return false;
        }
        if (phone.length>11||phone.length<5){
            console.log(phone);
            layer.alert("手机号格式错误");
            return false;
        }
        if ($.trim(username)===""){
            layer.alert("请输入用户名");
            return false;
        }
        if (username.length>20){
            layer.alert("用户名格式错误");
            return false;
        }
        if ($.trim(password1) === '' || $.trim(password1).length<=0){
            layer.alert("密码不能为空");
            return false;
        }
        if ($.trim(password1)!==$.trim(password2)){
            layer.alert("俩次密码输入不一致");
            return false;
        }
        if (password1.length>20||/.*[\u4e00-\u9fa5]+.*$/.test(password1)){
            layer.alert("密码格式错误");
            return false;
        }
        if(!(/^[\w_.]+@[\w-]+(\.[\w-]+)*\.[0-9a-zA-Z0]{2,6}$/).test(email)&&$.trim(email)!=="")
        {
            layer.alert("邮箱格式错误!");
            return false;
        }
        return true;
    }
    // 登录流程
    function login() {
        if (!validateCode('#loginCard','#loginCode')){
            //阻断提示
        }else {
            let identify = $('#identify').val();
            let phone = $('#phone').val();
            let password = $('#password').val();
            let loginLoadIndex = layer.load(2);
            $('#loginBtn').val("正在登录...");
            if (identify === "用户") {
                $.ajax({
                    url: baseUrl+"/user/judge_loginIn",
                    // url: baseUrl+"/user/judge_loginIn",
                    dataType: "json",
                    type: "post",
                    data: {
                        phone: phone,
                        password: password,
                    },
                    success: function (res) {
                        if (res === 2) {
                            layer.close(loginLoadIndex);
                            layer.msg('登录成功!');
                            sessionStorage.setItem("phone", phone);
                            sessionStorage.setItem("root", "0");
                            window.location.href = prefix+"/userManage"+suffix;
                        } else if (res === 0) {
                            $('#loginBtn').val("登录");
                            alert("账号未注册，请先注册!");
                        } else {
                            layer.close(loginLoadIndex);
                            $('#loginBtn').val("登录");
                            alert("密码错误，请重新输入!");
                        }
                    },
                    error: function () {
                        $('#loginBtn').val("登录");
                        alert("服务器内部请求错误!");
                    }
                });
                layer.close(loginLoadIndex);
            }
            else if(identify==="管理员"){
                $.ajax
                ({
                    url: baseUrl+"/admin/judge_admin",
                    dataType: "json",
                    type: "post",
                    data: {
                        phone: phone,
                        password: password,
                    },
                    success: function (res) {
                        if (res === 1) {
                            layer.close(loginLoadIndex);
                            layer.msg("登录成功!");
                            sessionStorage.setItem("root", "1");
                            window.location.href = prefix+"/adminManage"+suffix
                        } else { $('#loginBtn').val("登录");
                            alert("账号或密码错误,请重新输入!");
                        }
                    },
                    error: function () {
                        $('#loginBtn').val("登录");
                        alert("服务器内部请求错误!");
                    }
                });
                layer.close(loginLoadIndex);
            }
        }
    }
    // 注册流程
    function register() {
        layer.open({
            type:'1',
            content:$('.registerPage'),
            title:'注册',
            area:['460px','570px'],
            btn:['注册','重置','取消'],
            closeBtn:'1',
            btn1:function (index,layero) {
                //注册回调
                //layer.close(index);
                const user = {
                    userPhone: document.getElementById("phone1").value,
                    userName: document.getElementById("username").value,
                    userPassword: document.getElementById("password1").value,
                    sex: document.getElementById("sex").value,
                    userEmail: document.getElementById("email").value,
                    userRoot: 0,
                }
                let registerLoadIndex = layer.load(2);
                if (checkSignIn()) {
                  {
                        $.ajax(
                            {
                                url: baseUrl+"/user/signIn",
                                dataType: "json",
                                type: "post",
                                headers: {
                                    'Content-Type': 'application/json;charset=utf-8'
                                },
                                data: JSON.stringify(user),
                                success: function (res) {
                                    console.log(res)
                                    if (res === 1) {
                                        layer.close(registerLoadIndex);
                                        sessionStorage.setItem("phone", user.userPhone);
                                        sessionStorage.setItem("root", "0");
                                        layer.msg("注册成功,正在跳转.....")
                                        window.location.href = prefix+"/userManage"+suffix
                                    } else {
                                        layer.close(registerLoadIndex);
                                        alert("账号已注册!");
                                    }
                                },
                                error: function () {
                                    layer.close(registerLoadIndex);
                                    alert("服务器内部请求错误!");
                                }
                            });
                    }
                }
                else{
                    layer.close(registerLoadIndex);
                    //return false;
                }
            },
            btn2:function (index,layero) {
                //重置回调
                layui.$('#phone1').val("");
                $('#password1').val("");
                $('#sex').val("");
                $('#email').val("");
                $('#username').val("");
                // 防止注册页面关闭
                return false;
            },
            btn3:function (index,layero) {
                //取消回调
            }
        })
    }
</script>

</body>
<div class="registerPage">
    <div class="registerDiv">
        <form type="button">
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>手机号码</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-cellphone adminIcon"></i>
                    <label for="phone1"></label><input id="phone1" class="layui-input adminInput smallInput" type="number" name="phone1" placeholder="5~11位数字">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <label for="username"></label><input id="username" class="layui-input smallInput adminInput" type="text" name="username" placeholder="1~20字符组成" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <label for="password1"></label><input id="password1" class="layui-input smallInput adminInput" type="password" name="password1" placeholder="1~20个字符组成">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>确认密码</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <label for="password2"></label><input id="password2" class="layui-input smallInput adminInput" type="password" name="password2" placeholder="1~20个字符组成">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>邮箱</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon  adminIcon layui-icon-email"></i>
                    <label for="email"></label><input id="email" class="layui-input smallInput adminInput " type="email" name="email" placeholder="输入邮箱(选填)">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>性别</label>
                </div>
                <div class="usernameDiv smallInput">
                    <label for="sex"></label><select id="sex" class="layui-select">
                    <option value="" aria-checked="true" class="smallInput">保密</option>
                    <option value="男" class="smallInput">男</option>
                    <option value="女" class="smallInput">女</option>
                </select>
                </div>
            </div>
        </form>
    </div>
</div>
</html>
